<template>
	<div class="goods_one">
		<div class="goods"
			id="goods"
		>
			<ul class="goods-items">
				<li class="goods-item"
					v-for="(goods, index) in goodsList"
					@click="goDetail(goods)"
				>
					<div class="goods-item-img">
						<img v-lazy="goods.itempic + '_310x310.jpg'" 
							:key="goods.itempic"
						/>
					</div>
					<div class="goods-item-right">
						<p class="title one-line"><span class="TBimg" v-if="goods.shoptype == 'C'"></span><span class="TMimg" v-if="goods.shoptype == 'B'"></span>{{goods.itemshorttitle}}</p>
						<div class="hot">
							<p><i></i>已抢<span>{{goods.todaysale}}</span>件</p>
						</div>
						<div class="sale">
							<p class="oldprice">原价￥<span>{{goods.itemprice}}</span></p>
						</div>
						<div class="price">
							<p class="coupon-price">券后￥<span>{{goods.itemendprice}}</span></p>
							<p class="coupon" 
								:style="{background: 'linear-gradient(to bottom,' + colorLeft + ',' + colorRight + ')'}"
								v-if="goods.grab_type == 3"
							>马上抢</p>
							<p class="coupon" 
								:style="{background: '#999'}"
								v-if="goods.grab_type == 2"
							>已抢完</p>
							<p class="coupon" 
								:style="{background: colorLeft }"
								v-if="goods.grab_type == 1"
							>即将开抢</p>
						</div>
					</div>					
				</li>
			</ul>
			<div class="goods-none"
				v-if="this.goodsList.length == 0"
			>
				<img src="../assets/img/nodata.png" />
			</div>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		props: {
			goodsList: {
				type: Array
			}
		},
		data(){
			return{
				percentage: 0,
				colorLeft: window.localStorage.getItem("left"), 
				colorRight: window.localStorage.getItem("right"),
			}
		},
		mounted(){

		},
		methods: {
			goDetail: function(goods){
				if ( goods.shoptype == 'C' ) {
					this.type = 1
				} else {
					this.type = 2
				}
				this.$router.push({
					name: '秒杀商品详情',
					params: {
						id: goods.itemid,
						data: JSON.stringify(goods),
						url: goods.material_info.detail_video_url,
						mainurl: goods.material_info.main_video_url,
						mainimg: goods.detial_video_cover,
						img: goods.itempic
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.goods_one{
		@import '../assets/common/goods_three.scss'
	}
</style>